<template>
  <div>
    <h1>Home</h1>
    <!-- to 字符串传递params路径参数 -->
    <router-link to="/home/music/1">cnMusic</router-link>
    <!-- to 对象传递parmas路径参数 注：to对象写法不能用path 只能用name -->
    <router-link
      :to="{
        name: 'music',
        params: {
          id: '2',
          //传递params参数时,参数的值千万不能是空字符串！！！否则只能跳转一次
        },
      }"
      >unMusic</router-link
    >
    <!-- 跳转并携带query参数（to的字符串写法） -->
    <router-link to="/home/movie?name=星际穿越&time=2007">Movie1</router-link>
    <!-- 跳转并携带query参数（to的对象写法） -->
    <router-link
      :to="{ name: 'movie', query: { name: '让子弹飞', time: '2013' } }"
      >Movie2</router-link
    >
    <!-- 路由组件占位 指定位置展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style></style>
